<template>
  <ClientOnly>
    <template v-if="taskData">
      <Container class="flex-1">
        <div>
          <div class="header">
            <div class="right">
              <a-input
                size="large"
                v-model:value="taskDataParams.keyword"
                :placeholder="$t('placeholder.task_keyword')"
              >
                <template #prefix>
                  <svg
                    width="16"
                    height="16"
                    viewBox="0 0 16 16"
                    fill="none"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <circle
                      cx="7.33333"
                      cy="7.33333"
                      r="5.33333"
                      stroke="#172026"
                    />
                    <path d="M11.3333 11.3334L14 14" stroke="#172026" />
                  </svg>
                </template>
              </a-input>
              <a-button type="primary" @click="getTaskList">{{
                $t("btnText.search")
              }}</a-button>
            </div>
            <div class="publish">
              <a-button type="primary" @click="publishTask">{{
                $t("btnText.publish_task")
              }}</a-button>
            </div>
          </div>
          <NavbarVue
            gap-top
            hidden-split
            activeColor="#3d88f2"
            :data="globalStore.taskCategoryList"
            @click-navbar="onClickNavItem"
          />
          <template v-if="taskData.data.length > 0">
            <div class="task-list">
              <div
                class="task-item"
                style="min-width: 1px"
                v-for="item in taskData.data"
                :key="item.id"
              >
                <div class="task-header flex-ellipsis">
                  <div class="title">{{ item.title }}</div>
                  <span @click="showTaskDetail(item.id)">{{
                    $t("btnText.detail")
                  }}</span>
                </div>
                <div class="divider-line"></div>
                <div class="footer">
                  <div class="left">
                    <div class="id">id {{ item.task_no }}</div>
                    <div class="time">{{ item.create_time }}</div>
                  </div>
                  <div class="right">
                    <div
                      class="btn"
                      @click="onClickShowComment(item)"
                      :class="item.showComment ? 'active' : ''"
                    >
                      <svg
                        class="icon"
                        width="20"
                        height="20"
                        viewBox="0 0 20 20"
                        fill="none"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          d="M12.045 15.8335L10.0033 18.7502L7.96168 15.8335H2.50335C2.28233 15.8335 2.07037 15.7457 1.91409 15.5894C1.75781 15.4332 1.67001 15.2212 1.67001 15.0002V3.33352C1.67001 3.1125 1.75781 2.90054 1.91409 2.74426C2.07037 2.58798 2.28233 2.50018 2.50335 2.50018H17.5033C17.7243 2.50018 17.9363 2.58798 18.0926 2.74426C18.2488 2.90054 18.3367 3.1125 18.3367 3.33352V15.0002C18.3367 15.2212 18.2488 15.4332 18.0926 15.5894C17.9363 15.7457 17.7243 15.8335 17.5033 15.8335H12.045ZM11.1775 14.1668H16.67V4.16685H3.33668V14.1668H8.82918L10.0033 15.8435L11.1775 14.1668Z"
                          fill="#70818C"
                        />
                      </svg>
                      <span>{{ $t("btnText.comment") }}</span>
                    </div>
                    <div class="btn" @click="onClickReceiveBtn(item)">
                      <svg
                        class="icon"
                        width="20"
                        height="20"
                        viewBox="0 0 20 20"
                        fill="none"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          d="M15.8333 3.33354H4.16667V16.6669H15.8333V3.33354ZM2.5 2.49337C2.5 2.03691 2.87291 1.66687 3.33208 1.66687H16.6664C17.1266 1.66687 17.4997 2.03997 17.4998 2.5002L17.5 17.494C17.5 17.9576 17.1292 18.3335 16.6722 18.3335H3.32783C2.87063 18.3335 2.5 17.9541 2.5 17.507V2.49337ZM9.41075 10.9346L12.9462 7.3991L14.1247 8.57762L9.41075 13.2916L6.16984 10.0508L7.34835 8.8722L9.41075 10.9346Z"
                          fill="#3D88F2"
                        />
                      </svg>
                      <span>{{ $t("btnText.take_order") }}</span>
                    </div>
                  </div>
                </div>
                <div class="comment-content" v-if="item.showComment">
                  <h1 class="tag">{{ $t("content.task.comment_title") }}</h1>
                  <div class="input">
                    <a-input
                      size="large"
                      @change="commentInputChange($event)"
                      :placeholder="$t('placeholder.task_comment')"
                    ></a-input>
                    <a-button
                      type="primary"
                      class="disabled"
                      @click.stop="publishComment(item, $event, '', item)"
                      >{{ $t("btnText.comment") }}</a-button
                    >
                  </div>
                  <div class="comment-content-list" v-if="item.commentList">
                    <template v-for="item2 in item.commentList" :key="item2.id">
                      <div>
                        <div class="comment-content-item" @click.stop="">
                          <div class="comment-header">
                            <img
                              class="logo"
                              v-logo-error
                              :src="item2?.from_headimgurl"
                              alt="..."
                              v-if="item2?.from_headimgurl"
                            />
                            <img
                              class="logo"
                              src="~/assets/images/user-logo/default_logo.jpg"
                              alt=""
                              v-else
                            />
                            <div class="info">
                              <div class="name">
                                <span
                                  :style="{
                                    visibility: item2.from_name ? '' : 'hidden',
                                  }"
                                  >{{ item2.from_name }}</span
                                >
                                <span
                                  class="publisher"
                                  v-if="
                                    false &&
                                    item2.from_id == memberStore.profile?.id
                                  "
                                  >{{ $t("content.task.publisher") }}</span
                                >
                              </div>
                              <div class="time">{{ item2.create_time }}</div>
                            </div>
                          </div>
                          <div class="comment-content-text">
                            {{ item2.content }}
                          </div>
                          <div>
                            <div
                              class="btns"
                              v-if="
                                memberStore.profile &&
                                memberStore.profile.id == item2.from_id
                              "
                            >
                              <div
                                class="replay"
                                v-if="false"
                                @click.stop="showReplayInput(item2)"
                              >
                                {{ $t("btnText.replay") }}
                              </div>
                              <div
                                class="delete"
                                v-if="false"
                                @click="deleteComment(item2.id, item)"
                              >
                                {{ $t("btnText.delete") }}
                              </div>
                            </div>
                            <div
                              class="replay-input"
                              v-if="false && item2.show_replay"
                            >
                              <a-input
                                size="large"
                                @change="commentInputChange($event)"
                                :placeholder="$t('placeholder.task_replay')"
                              ></a-input>
                              <a-button
                                type="primary"
                                class="disabled"
                                @click.stop="
                                  publishComment(item2, $event, 'replay', item)
                                "
                                >{{ $t("btnText.replay") }}</a-button
                              >
                            </div>
                          </div>
                        </div>
                        <div
                          class="divider-line"
                          v-if="!(item2.list && item2.list.length > 0)"
                        ></div>
                        <template v-if="item2.list && item2.list.length > 0">
                          <div
                            class="comment-content-item replay-list"
                            v-for="(item3, item3Index) in item2.list"
                            :key="item3.id"
                          >
                            <div class="comment-header">
                              <img
                                class="logo"
                                v-logo-error
                                :src="item3?.form_headimgurl"
                                alt=""
                                v-if="item3?.form_headimgurl"
                              />
                              <img
                                class="logo"
                                src="~/assets/images/user-logo/default_logo.jpg"
                                alt=""
                                v-else
                              />
                              <div class="info">
                                <div class="name">
                                  <span>{{ item3.from_name }}</span>
                                  <span>{{ $t("content.task.replay") }}</span>
                                  <div
                                    v-if="
                                      item2.from_id == memberStore.profile?.id
                                    "
                                  >
                                    {{ item3.to_name }}
                                    <span class="publisher" v-if="false">{{
                                      $t("content.task.publisher")
                                    }}</span>
                                  </div>
                                </div>
                                <div class="time">{{ item3.create_time }}</div>
                              </div>
                            </div>
                            <div class="comment-content-text" @click.stop="">
                              <div class="text">{{ item3.content }}</div>
                              <div class="img" v-if="item3.single_pic">
                                <img
                                  src="~/assets/images/home/banner-6.jpg"
                                  class="cover ;"
                                  alt=""
                                />
                              </div>
                            </div>
                            <div
                              class="btns"
                              v-if="
                                memberStore.profile &&
                                memberStore.profile.id == item3.from_id
                              "
                            >
                              <div
                                class="replay"
                                v-if="false"
                                @click.stop="showReplayInput(item3)"
                              >
                                {{ $t("btnText.replay") }}
                              </div>
                              <div
                                class="delete"
                                v-if="false"
                                @click="deleteComment(item3.id, item)"
                              >
                                {{ $t("btnText.delete") }}
                              </div>
                            </div>
                            <div
                              class="replay-input"
                              v-if="false && item3.show_replay"
                            >
                              <a-input
                                size="large"
                                @change="commentInputChange($event)"
                                :placeholder="$t('placeholder.task_comment')"
                              ></a-input>
                              <a-button
                                type="primary"
                                class="disabled"
                                @click.stop="
                                  publishComment(item3, $event, 'replay', item)
                                "
                                >{{ $t("btnText.comment") }}</a-button
                              >
                            </div>
                          </div>
                          <div class="divider-line"></div>
                        </template>
                      </div>
                    </template>
                    <ShowMore
                      v-model:currentPage="item.page"
                      :totalCount="item.total"
                      @change="getCommentList(item)"
                    />
                  </div>
                  <template v-else>
                    <div class="pc-skeleton">
                      <div class="comment-content-list">
                        <div class="comment-header">
                          <Skeleton avatar width="32px" round height="32px" />
                          <div class="info flex-1">
                            <Skeleton :rows="2" pc height="50px" />
                          </div>
                        </div>
                        <div class="comment-content-text">
                          <Skeleton :rows="2" height="50px" pc></Skeleton>
                        </div>
                        <div class="btns">
                          <Skeleton
                            gap-skeleton
                            width="120"
                            height="120"
                            avatar
                          />
                        </div>
                        <div class="btns">
                          <Skeleton width="40" height="20" />
                          <Skeleton width="40" height="20" />
                        </div>
                      </div>
                    </div>
                  </template>
                </div>
              </div>
            </div>
          </template>
          <template v-else>
            <NoData />
          </template>
        </div>
      </Container>
      <Container padding-top="0" padding-bottom="0">
        <div class="pagination">
          <ShowMore
            v-model:currentPage="taskDataParams.page"
            :totalCount="taskData.total"
            @change="onShowMoreChange"
          />
        </div>
      </Container>
    </template>
    <SkeletonVue v-else />
    <!-- 弹窗 -->
    <DialogTaskDetail ref="dialogTaskDetailRef" :id="detailId" />
    <!-- 更新个人姓名 -->
    <FormModalMemberUpdateNickname ref="formModalMemberUpdateNickname" />
    <!-- 任务填写表单 -->
    <DialogTaskFill ref="dialogTaskFillRef" :type="'publish'" />
  </ClientOnly>
</template>

<script setup lang="ts">
import SkeletonVue from "./Skeleton.vue";
import NavbarVue from "../newProfile/a_components/navbar.vue";
import {
  computed,
  watch,
  getCurrentInstance,
  onBeforeMount,
  ref,
  nextTick,
  onMounted,
} from "vue";
import {
  postTaskList,
  postTaskCommentList,
  postTaskCommentCreate,
  postTaskReceive,
  postMemberTaskList,
  postTaskCommentReplay,
  postTaskCommentDelete,
  postTaskCategory,
} from "../../../api/task";
import type {
  TaskItem,
  TaskCommentItem,
  TaskIndexParams,
} from "../../../types/task";
import type { PageResult } from "../../../types/global";
import { message, Modal } from "ant-design-vue";
import { useGlobalStore, useMemberStore } from "../../../store";
import { useRoute } from "vue-router";
const route = useRoute();
const $t = getCurrentInstance()?.appContext.config.globalProperties.$t;
const globalStore = useGlobalStore();

const navActiveIndex = ref(0);

const onClickNavItem = async ({ item, index }) => {
  taskDataParams.value.page = 1;
  navActiveIndex.value = index;
  getTaskList();
};
const memberStore = useMemberStore();

watch(
  () => globalStore.taskCategoryList,
  () => {
    getTaskList();
  }
);

// 获取评论列表
const taskDataParams = ref<TaskIndexParams>({
  keyword: "",
  page: 1,
  category_id: "",
});
const taskData = ref<PageResult<TaskItem[]>>();
const getTaskList = async () => {
  let _categoryList =
    globalStore.taskCategoryList.filter((item) => item != undefined) || [];
  if (_categoryList.length == 0) return;

  taskDataParams.value.category_id = _categoryList[navActiveIndex.value]?.id;
  let res = await postTaskList(taskDataParams.value);
  if (res.code == 200) {
    taskData.value = res.data;
    taskDataParams.value.rows = res.data.per_page;
  }
};
getTaskList();

const onShowMoreChange = async () => {
  getTaskList();
};

// 获取评论列表
const getCommentList = async (taskItem: TaskItem) => {
  let task_id = taskItem.id;
  let res = await postTaskCommentList(task_id, taskItem.page);
  if (res.code == 200) {
    taskItem.commentList = res.data.data;
    taskItem.total = res.data.total;
  }
};
// 显示评论
const onClickShowComment = (item: TaskItem) => {
  item.showComment = !item.showComment;
  if (item.showComment) {
    if (item.page == undefined) {
      item.page = 1;
    }
    getCommentList(item);
  }
};

// 显示评论表单
const showReplayInput = (item: TaskCommentItem) => {
  if (!memberStore.profile) {
    message.warning($t("message.wait_login"));
    return;
  }
  if (item.from_id == memberStore.profile?.id) {
    message.warning($t("message.task_comment_error_self"));
    return;
  }
  if (item.show_replay) {
    item.show_replay = false;
  } else {
    if (item.show_replay == undefined || item.show_replay == null) {
      // Check if running in browser environment
      (
        document.querySelector("body>div:first-child") as HTMLElement
      ).addEventListener("click", () => {
        item.show_replay = false;
      });
    }
    item.show_replay = true;
  }
};

const dialogTaskFillRef = ref();
const formModalMemberUpdateNickname = ref();
const publishTask = () => {
  if (!memberStore.profile) return message.warning($t("message.wait_login"));
  let last_name = memberStore.profile?.last_name;
  let first_name = memberStore.profile?.first_name;
  if (!last_name || !first_name) {
    message.warning($t("message.perfect_information"));
    if (isMobile()) goto("/mobile/updateName");
    else formModalMemberUpdateNickname.value.show();
    return;
  }
  if (isMobile()) {
    goto("/mobile/publishTask");
  } else {
    nextTick(() => {
      dialogTaskFillRef.value.showDialog();
    });
  }
};
// 显示评论详情
const detailId = ref();
const dialogTaskDetailRef = ref();
const showTaskDetail = (id) => {
  if (isMobile()) {
    goto("/mobile_detail/task", { id });
    return;
  }
  detailId.value = id;
  nextTick(() => {
    dialogTaskDetailRef.value.showDialog();
  });
};

// =======================发布评论================================================================
const publishComment = async (
  item: TaskItem | TaskCommentItem,
  e,
  key: string,
  rootItem: TaskItem
) => {
  if (!memberStore.profile) return message.warning($t("message.wait_login"));
  let tagName = e.target.tagName;
  let inputValue;
  if (tagName == "SPAN") {
    inputValue =
      e.target.parentNode.parentNode.querySelector(".ant-input").value;
  } else {
    inputValue = e.target.parentNode.querySelector(".ant-input").value;
  }
  if (!inputValue) return;
  let res;
  if (key == "replay") {
    let parmas = {
      content: inputValue,
      task_id: rootItem.id,
      comment_id: item.id,
      to_id: (item as TaskCommentItem).from_id,
    };
    res = await postTaskCommentReplay(parmas);
  } else {
    res = await postTaskCommentCreate({
      content: inputValue,
      task_id: item.id,
    });
  }
  if (res.code === 200) {
    message.success($t("message.success.comment"));
    getCommentList(rootItem);
    if (tagName == "SPAN") {
      e.target.parentNode.parentNode.querySelector(".ant-input").value = "";
    } else {
      e.target.parentNode.querySelector(".ant-input").value = "";
    }
  } else {
    message.error(res.msg);
  }
};
const commentInputChange = (e) => {
  if (e.target.value) {
    e.target.parentNode.querySelector(".ant-btn").classList.remove("disabled");
  } else {
    e.target.parentNode.querySelector(".ant-btn").classList.add("disabled");
  }
};

// =======================接单================================================================
const onClickReceiveBtn = (item: TaskItem) => {
  if (!memberStore.profile) return message.warning($t("message.wait_login"));
  let last_name = memberStore.profile.last_name;
  let first_name = memberStore.profile.first_name;
  if (!last_name || !first_name) {
    message.warning($t("message.perfect_information"));
    if (isMobile()) {
      goto("/mobile/updateName");
      return;
    }
    goto("/member/account", {
      update: "nickname",
    });
    return;
  }
  if (item.member_id == memberStore.profile.id)
    return message.warning($t("message.task_receive_error_self"));
  Modal.confirm({
    title: `${$t("btnText.ensure_receive_task")}？`,
    okText: $t("btnText.ensure_receive_task"),
    cancelText: $t("btnText.cancel_receive_task"),
    maskClosable: true,
    centered: isMobile(),
    async onOk() {
      let res = await postTaskReceive(item.id);
      if (res.code === 200) {
        message.success($t("message.success.task.receive"));
        getTaskList();
      } else if (res.code == 400) {
        message.warning($t("message.warning.repeat_receive"));
      } else {
        message.error($t("message.error.unkown"));
      }
    },
    onCancel() {
    },
  });
};

// ==================删除评论==========================
const deleteComment = (id: number, rootItem: TaskItem) => {
  Modal.confirm({
    title: $t("dialog.task.confirm_delete_comment"),
    okText: $t("btnText.delete"),
    cancelText: $t("btnText.cancel1"),
    maskClosable: true,
    centered: isMobile(),
    async onOk() {
      let res = await postTaskCommentDelete(id);
      if (res.code === 200) {
        message.success($t("message.success.delete"));
        getCommentList(rootItem);
      } else {
        message.error($t("message.error.delete"));
      }
    },
    onCancel() {
    },
  });
};
</script>
<style scoped lang="less">
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  h1 {
    font-size: 24px;
    color: #172026;
  }
  .ant-btn {
    width: 76px;
    height: 40px !important;
    font-size: 14px !important;
    border-radius: 5px !important;
    background-color: #3d88f2;
  }
  .right {
    display: flex;
    gap: 12px;
    .ant-input-affix-wrapper {
      width: 320px;
      height: 40px;
      font-size: 14px;
      padding: 0 10px !important;
      border-radius: 5px !important;
      svg {
        width: 18px;
        height: 18px;
      }
    }
  }
}
.nav {
  display: flex;
  margin: 24px 0;
  gap: 32px;
  padding-bottom: 10px;
  border-bottom: 1px solid #e6edf2;
  .nav-item {
    position: relative;
    font-size: 16px;
    color: #36434d;
    cursor: pointer;
    &.active {
      color: #3d88f2;
      &::before {
        content: "";
        position: absolute;
        bottom: -2px;
        left: 0;
        width: 100%;
        height: 2px;
        background-color: #3d88f2;
      }
    }
  }
}
.task-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 64px;
  .title {
    color: #172026;
    font-size: 16px;
  }
  .task-header {
    span {
      font-size: 14px;
      cursor: pointer;
      color: #3d88f2;
    }
  }
  .footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    color: #36434d;
    .left {
      display: flex;
      align-items: center;
      .id {
        padding: 4px 8px;
        background-color: #3d88f2;
        border-radius: 6px;
        margin-right: 12px;
        font-size: 12px;
        color: #fff;
      }
      .time {
        font-size: 14px;
        color: #3d88f2;
      }
    }
    .right {
      display: flex;
      gap: 12px;
      .icon {
        width: 20px;
        height: 20px;
      }
      .btn {
        display: flex;
        padding: 10px 16px;
        color: #3d88f2;
        font-size: 14px;
        border-radius: 5px;
        gap: 4px;
        &.active {
          border: 1px solid #3d88f2 !important;
          &:first-child {
            color: #3d88f2;
          }
          .icon * {
            fill: #3d88f2;
          }
        }
        &:first-child {
          border: 1px solid #ccd6de;
          color: #172026;
        }
        &:last-child {
          background: rgba(61, 136, 242, 0.1);
        }
      }
    }
  }
  .comment-content {
    margin-top: 24px;
    .tag {
      position: relative;
      padding-left: 7px;
      font-size: 16px;
      color: #172026;
      &::before {
        content: "";
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        left: 0;
        width: 3px;
        height: 10px;
        background-color: #172026;
      }
    }
    .input,
    .replay-input {
      display: flex;
      gap: 24px;
      margin: 16px 0;
      .ant-input {
        height: 40px;
        font-size: 14px;
        border-radius: 5px;
        padding: 10px 12px;
      }
      .ant-btn {
        width: 76px;
        height: 40px !important;
        font-size: 14px !important;
        border-radius: 5px !important;
        background-color: #3d88f2;
        box-shadow: 0 0 transparent;
        &.disabled {
          background: rgba(61, 136, 242, 0.3);
        }
      }
    }
    .replay-list {
      margin-top: 12px;
      .name {
        display: flex;
        gap: 5px;
        .publisher {
          margin-left: 0 !important;
        }
      }
    }
    .comment-header {
      display: flex;
      align-items: center;
      gap: 12px;
      .logo {
        width: 32px;
        height: 32px;
      }
      .name {
        color: #36434d;
        font-size: 14px;
        & > span:first-child {
          min-height: 10px;
          display: inline-block;
        }
        .publisher {
          font-size: 10px;
          padding: 2px 4px;
          background-color: #3d88f2;
          border-radius: 2px;
          margin-left: 4px;
          color: #fff;
        }
      }
      .time {
        font-size: 12px;
        color: #70818c;
      }
    }
    .comment-content-text {
      font-size: 14px;
      margin: 12px 0;
      color: #36434d;
      .img {
        width: 120px;
        height: 120px;
        border-radius: 10px;
        border: 1px solid #ccd6de;
        overflow: hidden;
        img {
          width: 100%;
          height: 100%;
          object-fit: contain;
        }
      }
    }
    .btns {
      font-size: 14px;
      color: #70818c;
      display: flex;
      gap: 16px;
      & > div {
        cursor: pointer;
      }
      .replay {
        color: #3d88f2;
      }
    }
  }
}
.mobile_banner {
  display: none;
  height: 2836px;
  background-size: cover;
  background-position: -5200px;
}
.pagination {
  display: flex;
  justify-content: flex-end;
  .ant-pagination {
    margin: 0;
  }
}
@media screen and (max-width: 768px) {
  .header {
    h1 {
      font-size: 92px;
    }
    .right {
      flex: 1;
      :deep(.ant-input-affix-wrapper) {
        width: 100%;
        height: 205px;
        font-size: 72px;
        flex-direction: row-reverse;
        padding: 51px 61px !important;
        border-radius: 20px !important;
        .ant-input-prefix {
          margin-inline-end: 0;
          margin-left: 41px;
        }
        svg {
          width: 82px;
          height: 82px;
        }
      }
    }
    align-items: unset;
    flex-direction: column;
    gap: 82px;
    .ant-btn {
      display: none;
      border-radius: 20px !important;
      font-size: 72px !important;
    }
    & > div {
      flex: 1;
    }
    .publish {
      .ant-btn {
        display: flex;
        height: 205px !important;
      }
    }
  }
  .nav {
    gap: 123px;
    margin: 123px 0;
    padding-bottom: 60px;
    .nav-item {
      font-size: 82px;
      &.active {
        &::before {
          height: 10px;
          bottom: -10px;
        }
      }
    }
  }
  .task-list {
    grid-template-columns: repeat(1, 1fr);
    gap: 164px;
    .title,
    .title + span {
      font-size: 82px;
    }
    .divider-line {
      margin: 61px 0;
    }
    .footer {
      font-size: 61px;
      .left {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
        .id {
          padding: 20px 41px;
          border-radius: 31px;
          margin-right: 0;
          font-size: 61px;
        }
        .time {
          font-size: 61px;
        }
      }
      .right {
        gap: 61px;
        .icon {
          width: 102px;
          height: 102px;
        }
        .btn {
          padding: 51px 82px;
          font-size: 72px;
          gap: 20px;
          border-radius: 51px;
        }
      }
    }
    .comment-content {
      margin-top: 123px;
      .tag {
        font-size: 82px;
        padding-left: 36px;
        &::before {
          width: 15px;
          height: 51px;
        }
      }
      .input {
        gap: 61px;
        margin: 82px 0;
        .ant-input {
          height: 205px;
          font-size: 72px;
          padding: 51px 41px;
          border-radius: 20px;
        }
        .ant-btn {
          height: 205px !important;
          width: 389px;
          font-size: 72px !important;
          border-radius: 20px !important;
          padding: 51px 123px !important;
        }
      }
      .comment-header {
        gap: 61px;
        .logo {
          width: 164px;
          height: 164px;
        }
        .name {
          font-size: 72px;
        }
        .time {
          font-size: 61px;
        }
      }
      .comment-content-text {
        font-size: 72px;
        margin: 61px 0;
        .img {
          width: 614px;
          height: 614px;
          border-radius: 51px;
        }
      }
      .btns {
        font-size: 72px;
        gap: 82px;
      }
    }
  }
  .mobile_banner {
    display: block;
    .text {
      padding: 0 123px;
      padding-top: 369px;
      font-size: 164px;
      color: #172026;
    }
  }
}
</style>
